<template>
  <div class="department" id="department">
    <div class="department_right">
      <div class="app-container-btn">
        <el-button
          type="primary"
          v-if="btnShow"
          @click="yj_saveForm('formData')"
          >保存</el-button
        >
        <el-button @click="goBack">返回</el-button>
      </div>
      <!-- 表格 -->
      <div class="text_table TensionRealTime">
        <div
          class="dialogBody common table_detail"
          style="overflow: hidden; height: 100%"
        >
          <div style="overflow-y: auto; margin-bottom: 20px">
            <!-- <div class="baseTitle">生产配合比信息</div> -->
            <div class="app-container-area-title">
              <span class="app-container-area-title-divider"></span>
              <span>生产配合比信息</span>
            </div>
            <div>
              <publicForm
                ref="publicForm"
                lableWidth="125px"
                :formObj="formObjText"
                :formData="formData"
              >
              </publicForm>
            </div>
            <div class="mixProportion">
              <div class="titleBig">
                <div class="title" style="width: 20%; border-left: none">
                  项目
                </div>
                <div class="title">水泥</div>
                <div class="title">砂</div>
                <div class="title title1" style="width: 24%">
                  <div class="title1_1">碎石</div>
                  <div class="title1_2">
                    <div class="title1_2_1" style="border-left: none">1</div>
                    <div class="title1_2_1">2</div>
                    <div class="title1_2_1">3</div>
                  </div>
                </div>
                <div class="title">水</div>
                <div class="title">减水剂</div>
                <div class="title title1" style="width: 16%">
                  <div class="title1_1">外渗料</div>
                  <div class="title1_2">
                    <div class="title1_2_2" style="border-left: none">
                      粉煤灰
                    </div>
                    <div class="title1_2_2">矿渣粉</div>
                  </div>
                </div>
                <div class="title">防水添加剂</div>
              </div>
              <div
                class="titleSmall"
                v-for="(v, i) in formData.materialList"
                :key="i"
              >
                <div
                  class="title2"
                  style="width: 20%; border-left: none"
                  v-text="v[0]"
                ></div>
                <div class="title2">
                  <el-input
                    v-model="v[1]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[2]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[3]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[4]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[5]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[6]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[7]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[8]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[9]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
                <div class="title2">
                  <el-input
                    v-model="v[10]"
                    placeholder="/"
                    :disabled="disabled"
                  ></el-input>
                </div>
              </div>
            </div>
            <div>
              <publicForm
                ref="publicForm0"
                lableWidth="125px"
                :formObj="formObjText1"
                :formData="formData"
                :timestamp="formData.fFillingfile"
                :fileList="fSourcefileList"
                @delteFile="delteFile"
              >
              </publicForm>
            </div>

            <div class="app-container-area-title">
              <span class="app-container-area-title-divider"></span>
              <span>测量情况</span>
            </div>
            <!-- <div class="baseTitle" style="margin-top: 8px" v-if="handNum"> -->
            <!-- <div class="baseTitle" style="margin-top: 8px">测量情况</div> -->
            <el-collapse v-model="activeNames" @change="changeCollapse">
              <!-- <el-collapse-item name="0" v-if="handNum"> -->
              <el-collapse-item name="0">
                <template slot="title">
                  <div>
                    <img
                      style="vertical-align: middle"
                      src="@/assets/img/Supervision/com_flg.png"
                      alt=""
                    />
                    <span style="margin-left: 8px">场站坍落度实测</span>
                  </div>
                </template>
                <!-- <div
                  class="publicForm"
                  :style="{
                    height:
                      formData.fIsabandon == '否' || formData.fIsabandon == null
                        ? '320px'
                        : '140px',
                  }"
                > -->
                <div class="publicForm">
                  <publicForm
                    ref="publicForm1"
                    lableWidth="125px"
                    :formObj="handleObj"
                    :formData="formData"
                    :timestamp="formData.fStationfile"
                    :fileList="stationfileList"
                    @delteFile="delteFile"
                  >
                  </publicForm>
                </div>
              </el-collapse-item>

              <!-- <el-collapse-item name="1" v-if="firstNum"> -->
              <el-collapse-item name="1">
                <template slot="title">
                  <div>
                    <img
                      style="vertical-align: middle"
                      src="@/assets/img/Supervision/com_flg.png"
                      alt=""
                    />
                    <span style="margin-left: 8px">现场坍落度检测</span>
                  </div>
                </template>
                <div class="publicForm">
                  <publicForm
                    ref="publicForm2"
                    lableWidth="125px"
                    :formObj="processObj"
                    :formData="formData"
                  >
                  </publicForm>
                </div>
              </el-collapse-item>
            </el-collapse>
            <div style="height: 50px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import actions from "@/actions";
import tree from "@/components/public/el-trees"; //左侧机构树
import TableData from "@/components/HntManage/el-tables"; //主页面列表
import Pagination from "@/components/public/el-pagination"; //主页面分页
import elBreadcrumb from "@/components/public/el-breadcrumb.vue"; //面包屑
import publicForm from "@/components/public/el-form.vue"; //弹框form
import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getConcreteRecipeByFid, //配合比详情
  saveConcreteRecipeBySite,//保存
} from "@/api/request.js";

export default {
  name: "mix-notice",
  data() {
    return {
      name: "mix-notice", //按钮配置页面代号
      projectsObj: [], //项目名
      tendersObj: [],
      editLoading: false,
      yj_view: null,
      projectName: [], //下拉框项目名称
      LotName: [], //下拉框标段名称
      bhzDataList: [], //拌合站
      bhjDataList: [], //拌合机

      // 分页
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      // 分页

      // 列表
      getList: {
        fCheckStatus: "0", //0- APP端查询  1-填报人列表  2-场站列表  3-现场列表
        modelType: "", // 0代办 1已办 不传或传空 表示列表页查询
        page: 1, //页码
        pageSize: 20, //每页条数
        projectId: "", // 查询条件项目ID
        companyId: "", // 查询条件标段ID
        stationId: "", // 查询条件拌合站ID
        machineId: "", // 查询条件拌合机ID
        fCompanyid: "", // 左侧选中组织机构id
        userId: "", // 查询待办或已办时传 列表页查询不传
      },
      loading: false, //列表转载
      fId: null, //当前行数据fId
      table_config: formJs.table_config,
      tableData: [], //表格列表数据列表
      row: null, //当前行
      // 列表

      // 弹框
      timeYMD: null, //当前日期
      btnShow: true,
      disabled: false,
      dialogTitle: "",
      loadingEditDialog: false, //弹框loading
      dialogEditVisible: false, //新增弹框是否显示
      formObjText: formJs.formObjs,
      formObjText1: formJs.formObj1s,
      handleObj: formJs.handleObj, //场站
      processObj: formJs.processObj, //现场
      processObjLook: formJs.processObj, //现场查看
      processObjText: formJs.processObjs, //现场编辑
      formData: formJs.formData,
      recordfiles: [], //删除文件
      fSourcefileList: [],
      stationfileList: [],
      saveData: formJs.saveData,
      // 弹框

      // 弹框2
      loadingEditDialogSC: false, //弹框loading
      dialogEditVisibleSC: false, //新增弹框是否显示
      formObjSC: formJs.formObjSC, //生产任务单弹框
      baseData: formJs.baseData,
      isShow: false,
      navigatepageNums1: null, //是否显示分页
      queryCriteriaData1: {}, //分页
      aggregateData: ["骨料1", "骨料2", "骨料3", "骨料4", "骨料5"],
      tableData1: [],
      tableList: {
        companyid: "", // 施工标段id
        taskNumber: "",
        page: 1, // 当前页码
        pageSize: 3, // 每页显示条数
      },
      // 弹框2

      // 机构树
      highlightBd: true, //左侧机构树停留背景色
      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级按钮
      showName: "未选择公司",
      companyTree: "", //所有数据
      treeData: [], //左侧树状图数据
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
        text: null,
      },
      checkData: [], //树状图默认选中id
      // 机构树
      activeNames: ["0", "1"],
      userInfo: {}, //登录用户
    };
  },
  components: {
    tree, //左侧组织机构数
    TableData, //主页面列表
    elBreadcrumb, //面包屑
    publicForm, //弹框表格
    Pagination, //分页
  },
  mounted() {
    actions.onGlobalStateChange((state, prev) => {
      this.userInfo = prev.currentUser;
      this.projectsObj = prev.currentUser.projects;
    }, true);
    this.getDate();

    this.editText();
  },
  methods: {
    goBack() {
      this.$router.back();
    },

    // 查看
    editText(id) {
      var id = JSON.parse(this.$route.query.data).fId;
      if (this.$route.query.num == 0) {
        //查看
        this.btnShow = false;
        this.disabled = true;
        this.processObj = this.processObjLook;
      } else if (this.$route.query.num == 1) {
        //编辑
        this.btnShow = true;
        this.disabled = false;
        this.recordfiles = [];
        // this.formData = this.processObjs;
        this.processObj = this.processObjText;
      }
      if (id != "" && id != null) {
        getConcreteRecipeByFid({ fId: id })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.loadingEditDialog = false;
              // if (this.$route.query.num == 0) {
              //查看
              this.formData = res.data.concreteRecipe;
              // } else
              if (this.$route.query.num == 1) {
                //编辑
                // this.formData = res.data.concreteRecipe;
                this.formData.fSitetestedates = this.timeYMD;
                this.formData.fSitetesterid = this.userInfo.id; // 现场检测人id
                this.formData.fSitetestername = this.userInfo.userName; // 现场检测人名称
              }
              this.fSourcefileList = res.data.fillingfile;
              this.stationfileList = res.data.stationfile;
            } else {
              this.$message.error("查看", res.msg);
              this.loadingEditDialog = false;
            }
          })
          .catch(() => {
            console.log("查看---详情接口报错");
            this.loadingEditDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要查看的数据");
      }
    },

    // 折叠面板
    changeCollapse(e) {
      console.log(this.activeNames, e);
    },

    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // indexMethod(index) {
    //   return index + 1 + (this.tableList.page - 1) * 3; // page是当前的页码，size是页码容量
    // },
    
    yj_saveForm() {
      if (this.$refs.publicForm2.submitForm()) {
        // this.getUserInitialList.map((v) => {
        //   if (this.formData.fAppointsitetestername == v.fRealname) {
        //     this.formData.fAppointsitetesterid = v.fUserid;
        //   }
        // });

        this.saveData = {
          fId: this.formData.fId,
          fSitetestslump: this.formData.fSitetestslump, // 现场实测塌落度
          fSitetestnote: this.formData.fSitetestnote, // 现场检测说明
          fSitetesterid: this.formData.fSitetesterid, // 现场检测人id
          fSitetestername: this.formData.fSitetestername, // 现场检测人名称
          fSitetestedates: this.formData.fSitetestedates, // 现场检测时间
        };
        saveConcreteRecipeBySite(this.saveData)
          .then((res) => {
            if (res.errcode == 0) {
              this.$router.push("/hntManage/siteCollapse");
            } else {
              this.$message.error(res.msg);
              console.log("接口报错");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        console.log("error");
      }
    },
    getDate() {
      var time = new Date();
      const y = time.getFullYear();
      const m = (time.getMonth() + 1 + "").padStart(2, "0");
      const d = (time.getDate() + "").padStart(2, "0");
      this.timeYMD = `${y}-${m}-${d}`;
    },
    // 获取页面容器高度
    getHeight() {
      // var h = document.documentElement.clientHeight; //获取页面可见高度
    },

    selectionChange() {},
    // 排序方法
    sortChange() {},
  },
};
</script>

<style scoped>
.TensionRealTime {
  overflow-y: auto;
}

.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  /* padding: 3px 20px;
    height: 80%; */
  height: 100%;
  overflow-y: auto;
}

.baseTitle {
  /* border: 1px solid #0c204d; */
  border-bottom: 1px solid #0c204d;
  height: 30px;
  line-height: 30px;
  position: relative;
  padding-left: 15px;
}

.baseTitle::after {
  display: block;
  content: "";
  height: 30px;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background: #0c204d;
}

/* 砼配合比表格 */
.mixProportion {
  width: 99%;
  height: 150px;
  margin: 20px 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.titleBig {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}

.title {
  height: 100%;
  width: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #ccc;
  font-size: 12px;
  font-weight: 700;
}

.title1 {
  display: flex;
  flex-direction: column;
}

.title1_1 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.title1_2 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title1_2_1 {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.title1_2_2 {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.titleSmall {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #ccc;
  /* background: #0c204d; */
  display: flex;
}

.title2 {
  width: 8%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.titleSmall /deep/ .el-input__inner {
  height: 27px !important;
  line-height: 26px !important;
  text-align: center;
  border: none;
}

.titleSmall /deep/ .el-input {
  line-height: 28px !important;
}

/* 砼配合比表格 */
/* 任务单弹框 */
.Multi_level_header /deep/.el-table__body-wrapper tr {
  height: 80px !important;
}

.Multi_level_header /deep/.el-table__body-wrapper .lineBoxhidden {
  height: 64px !important;
  line-height: 22px !important;
}

.Multi_level_header /deep/.el-table .el-table__body-wrapper .cell {
  height: 100% !important;
}

.materialClass /deep/.el-table tr:nth-child(4) {
  display: none;
}

#materialPage /deep/ .bgwarn2 {
  background: #e6a23c !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn1 {
  background: #409eff !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn3 {
  background-color: #f56c6c !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn4 {
  background-color: rgb(212, 179, 137) !important;
  color: #fff !important;
}

/* 任务单弹框 */
</style>
